<template>
  <el-button :type="props.buttonType || 'primary'" @click="handleExport()" :loading="loading">导出</el-button>
</template>
<script lang='ts' setup>
import {ref} from 'vue'
import {exportFile} from '@/api/exports'
import {ElMessage} from 'element-plus'

const props = defineProps(['path', 'fileName', 'params', 'buttonType'])
const loading = ref(false)

const handleDownload = (url: string, fileName: string) => {
  var xml = new XMLHttpRequest()
  xml.open('GET', url, true)
  xml.responseType = 'blob'
  xml.onload = function () {
    var url = window.URL.createObjectURL(xml.response)
    var a = document.createElement('a')
    a.href = url
    a.download = fileName
    a.click()
  }
  xml.send()
}

const handleExport = () => {
  loading.value = true
  console.log(props);
  
  exportFile(props.path, props.params).then(res => {
    if(res.code === 200) {
      handleDownload(res.data, props.fileName)
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning',
      })
    }
    loading.value = false
  }).catch(err => {
    console.log('...err', err);
    loading.value = false
  })
}

</script>
<style lang='scss' scoped>
</style>